Draft
Conversation
Replace the fixed 96px width with a CSS grid-based approach that renders both the active and alternate label text (e.g. Refresh/Cancel), with the alternate hidden via visibility:hidden. This ensures the button always takes the width of the longest label, preventing layout shifts when toggling between states and supporting variable-length translations. Fixes grafana/grafana#119789 Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
|
Cursor Agent can help with this pull request. Just |
Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Remove the hard-coded width='96px' that was applied when withText is enabled. The button now naturally sizes to its text content, which correctly handles translations of any length without truncation. Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Render both the refresh and cancel labels as overlapping spans inside an inline-grid container, toggling visibility based on the running state. This ensures the button always takes the width of the longest label, preventing layout shifts when toggling and adapting to any translation. Removes the fixed 96px width that caused truncation in longer languages. Fixes grafana/grafana#119789 Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Both labels overlap in the same grid cell via gridArea:'1/1', toggling visibility. The cell width equals the wider label, so the button never changes size when switching states. Replaces the fixed 96px width and works with any translation length. Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces the fixed width of the SceneRefreshPicker button with a dynamic width solution to support multi-language labels and prevent layout shifts when toggling between refresh and cancel states.
The original issue (grafana/grafana#119789) reported that the fixed
96pxwidth caused text truncation for longer labels (e.g., German) and layout shifts. This PR introduces a CSSinline-gridcontainer where both the visibleRefreshPickerand a hiddenRefreshPicker(displaying the alternate text) occupy the same grid cell. This ensures the button's width always accommodates the longest possible label, preventing truncation and layout shifts. The hidden instance usesvisibility: hiddenandpointer-events: noneto be inert.